<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            /* text-decoration 文本装饰  (是否添加线) */
            /* text-decoration: none; */

            /* underline 下划线 */
            /* text-decoration: underline; */

            /* overline 上划线 */
            /* text-decoration: overline; */

            /* line-through 删除线 */
            text-decoration: line-through;


            color: inherit;
        }

        div {
            text-decoration: underline;
        }

        body {
            color: red;
            font-size: 12px;

            font-weight: 200;
        }
    </style>
</head>

<body>

    <h1>哈哈哈</h1>

    <div>呵呵呵</div>

    <!-- 
        a标签
            自带下划线    text-decoration
            蓝色的文字    自带的颜色 --- 不会继承父元素的颜色     color:inherit   强行让它继承
            小标签     但是它可以嵌套其他标签
     -->

    <a href="">超链接</a>

    <u>下划线</u>

    <del>删除</del>



    <!-- <span>
        <div></div>
    </span> -->

    <a href="">
        <div></div>
    </a>


    <!-- logo -->
    <h1>
        <a href="">
            <img src="" alt="">
        </a>
    </h1>

    <!-- <a href="">
        <h1>
            <img src="" alt="">
        </h1>
    </a> -->


    <!-- 列表的嵌套 -->
    <ul>
        <li>
            <a href="">
                <img src="" alt="">
                <h3></h3>
                <p></p>
                <p></p>
            </a>
        </li>
    </ul>




    <!-- 导航的 -->
    <ul>
        <li>
            <a href="">首页</a>
        </li>
        <li>
            <a href="">首页</a>
        </li>
        <li>
            <a href="">首页</a>
        </li>
    </ul>



</body>

</html>